<script setup lang="ts">
import {ref, h, reactive, onMounted} from 'vue';
import container from "../../components/container.vue";
import {storeToRefs} from "pinia";
import {useTag} from "../../store/tag.ts"
import {menuData} from "../../api/menu/menu.ts"

const menudata = reactive({
  data: []
})

const getmenuData = () => {
  menuData().then(res => {
    if (res && 'code' in res && res.code == 0) {
      menudata.data = res.data
    }
    console.log('菜单', res.data, menudata)
  })
}
onMounted(() => {
  getmenuData()
})
const {openTags} = storeToRefs(useTag())
const expandedKeys = ref([]);

const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  checkStrictly: true
});

//显示隐藏模态框
const modalvisible = ref(false)
//菜单类型
const menuType = ref({})

const add = () => {
  modalvisible.value = true
}
const handleOk = (event) => {
  console.log('点击确定', event);
  modalvisible.value = false
}

const show = ref(true)

const data = [{
  key: '4',
  name: '总公司',
  first: 'Ed',
  last: 'Hellen',
  salary: 17000,
  sort: '0',
  email: '2020-20-20 20:2000',
  children: [
    {
      key: '6',
      name: 'ss 部',
      first: 'William',
      last: 'Smith',
      salary: 27000,
      sort: '0',
      email: 'william.smith@example.com'
    }, {
      key: '5',
      name: '11部',
      first: 'William',
      last: 'Smith',
      salary: 27000,
      sort: '0',
      email: 'william.smith@example.com'
    }
  ]
}];

const departmentStatus = [
  {
    value: '正常',
    disabled: true
  }, {
    value: '不正常',
    disabled: false
  }, {
    value: '很不正常',
    disabled: false
  }, {
    value: '很正常',
    disabled: true
  }
]
const form = reactive({
  //名称
  name: '',
  //备注
  remarks: '',
  //排序
  order:0,
});
</script>

<template>
  <container :displayNavigation="true">
    <div class="search">
      <a-row class="grid-demo">
        <a-col class="b" :span="8" :sm="20" :md="16" :lg="10" :xl="8">
          <a-space class="search_input_group">
            <div class="select_title">部门名称</div>
            <a-input :style="{width:'250px'}" default-value="" placeholder="请输入部门名称" allow-clear/>
          </a-space>
        </a-col>
        <a-col class="b" :span="8" :sm="20" :md="16" :lg="10" :xl="8">
          <a-space class="search_input_group">
            <div class="select_title">部门状态</div>
            <a-select :style="{width:'250px'}" allow-search>
              <a-option v-for="item in departmentStatus" :disabled=" 'disabled' in item &&  item.disabled">{{
                  item.value
                }}
              </a-option>
            </a-select>
          </a-space>
        </a-col>
        <a-col class="b" :span="10" :sm="10" :md="16" :lg="10" :xl="5">
          <a-space class="search_input_group">
            <a-button type="primary">
              <template #icon>
                <icon-search/>
              </template>
              <template #default>查询</template>
            </a-button>
            <a-button type="outline">
              <template #icon>
                <icon-sync/>
              </template>
              <template #default>重置</template>
            </a-button>
          </a-space>
        </a-col>
      </a-row>


    </div>
    <div class="table_box">
      <a-space>
        <a-button type="primary" @click="add">
          <template #icon>
            <icon-plus/>
          </template>
          <template #default>添加</template>
        </a-button>
      </a-space>
      <a-table :data="data" style="margin-top: 30px">
        <template #columns>
          <a-table-column title="部门名称" data-index="name"></a-table-column>
          <a-table-column title=" 部门状态 " data-index="name">
            <template #cell="{ record }">
              <a-space size="操作">
                <a-tag color="red">异常</a-tag>
              </a-space>
            </template>
          </a-table-column>
          <a-table-column title="排序" data-index="sort"></a-table-column>
          <a-table-column title="更新时间" data-index="email"></a-table-column>
          <a-table-column title="操作">
            <template #cell="{ record }">
              <a-space size="操作">
                <a-button @click="$modal.info({ title:'Name', content:record.name })">增</a-button>
                <a-button @click="$modal.info({ title:'Name', content:record.name })">删</a-button>
                <a-button @click="$modal.info({ title:'Name', content:record.name })">改</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
    <!--=====【模态框 start】===============================================-->
    <a-modal v-model:visible="modalvisible" @ok="handleOk">
      <template #title>
        新增部门
      </template>
        <a-form :model="form" >
          <a-form-item field="name"  label="上级部门" required
                       :rules="[{required:true,message:'名称必选'}]"
                       :validate-trigger="['change','input']"
            >
            <a-select  placeholder="请选择上级部门">
              <a-option  v-model:input-value="form.name" v-for="(it,i) in [0,0,0,0]">{{i}}Beijing</a-option>
            </a-select>
          </a-form-item>
          <a-form-item field="name"  label="部门名称" required
                       :rules="[{required:true,message:'请输入部门名称'}]"
                       :validate-trigger="['change','input']"  >
            <a-input
                v-model="form.name"
                placeholder="请输入部门名称"
            />
          </a-form-item>
          <a-form-item field="name"  label="负责人"  >
            <a-input
                v-model="form.name"
                placeholder="请输入负责人姓名"
            />
          </a-form-item>
          <a-form-item field="name"  label="联系电话"  >
            <a-input
                v-model="form.name"
                placeholder="请输入联系电话"
            />
          </a-form-item>
          <a-form-item field="post" label="排序">
            <a-input-number v-model="form.order" :style="{width:'180px'}" :min="0"  max="10000" mode="button" size="large" class="input-demo" />
          </a-form-item>
          <a-form-item field="post" label="">
            <div> <icon-arrow-up/> 默认为 0 ，数值越大越排前 </div>
          </a-form-item>
          <a-form-item field="post" label="部门状态">
           <a-switch></a-switch>
          </a-form-item>
        </a-form>
    </a-modal>
    <!--=====【模态框 end】===============================================-->

  </container>
</template>

<style scoped lang="scss">

@mixin box_container {
  margin-top: 20px;
  background: #fff;

  border-radius: 8px;
}

.table_box {
  @include box_container;
  padding: 20px;
}

.search {
  @include box_container;

  .search_input_group {
    margin: 20px 0;
    padding: 0 20px;
  }
}


.select_title {
  white-space: nowrap;
}
</style>